```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Claude Code Templates | 开发者代码模板工具</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #2d3748;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .code-block {
            font-family: 'Courier New', Courier, monospace;
            background-color: #f7fafc;
            border-left: 4px solid #667eea;
        }
        .section-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.5), transparent);
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 3.5rem;
            line-height: 0.8;
            margin: 0.2em 0.5rem 0 0;
            color: #667eea;
            font-weight: 700;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto">
            <div class="flex flex-col lg:flex-row items-center">
                <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-12">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-code-branch text-2xl mr-2"></i>
                        <span class="uppercase tracking-wider font-medium">开源项目</span>
                    </div>
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Claude Code Templates</h1>
                    <p class="text-xl opacity-90 mb-8 drop-cap">一个革命性的命令行工具，为开发者提供标准化的代码模板和自动化配置，简化项目初始化和监控流程。无论您是个人开发者还是企业团队，都能快速构建高质量项目。</p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="#start" class="bg-white text-indigo-700 hover:bg-gray-100 font-semibold py-3 px-6 rounded-lg shadow-md transition duration-300 flex items-center justify-center">
                            <i class="fas fa-play mr-2"></i> 快速开始
                        </a>
                        <a href="https://github.com/davila7/claude-code-templates" target="_blank" class="bg-indigo-800 hover:bg-indigo-900 text-white font-semibold py-3 px-6 rounded-lg shadow-md transition duration-300 flex items-center justify-center">
                            <i class="fab fa-github mr-2"></i> GitHub 仓库
                        </a>
                    </div>
                </div>
                <div class="lg:w-1/2">
                    <div class="bg-white rounded-xl shadow-2xl overflow-hidden">
                        <div class="bg-gray-100 px-4 py-3 flex items-center">
                            <div class="flex space-x-2 mr-4">
                                <span class="w-3 h-3 rounded-full bg-red-500"></span>
                                <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
                                <span class="w-3 h-3 rounded-full bg-green-500"></span>
                            </div>
                            <div class="text-sm text-gray-600">terminal</div>
                        </div>
                        <div class="p-4 font-mono text-sm">
                            <div class="text-green-600 mb-2">$ npx claude-code-templates@latest</div>
                            <div class="mb-1">✔ 选择项目类型: <span class="text-blue-600">React</span></div>
                            <div class="mb-1">✔ 自动检测框架版本: <span class="text-blue-600">18.2.0</span></div>
                            <div class="mb-1">✔ 生成目录结构...</div>
                            <div class="mb-1">✔ 配置 ESLint + Prettier</div>
                            <div class="mb